<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page import="java.util.*,java.lang.*" %>
<%@ page isELIgnored="false"%>


<html>
<head>
    <title>員工列表</title>
    <%
        pageContext.setAttribute("APP_PATH", request.getContextPath());
    %>
    <%-- 注意一下  jquery 必須要在bootstrap前引入  不然模態框會出不來 --%>
    <script type="text/javascript"
    <%--          src="${APP_PATH}/static/js/jquery-1.12.4.min.js"></script>--%>
            src="${APP_PATH}/static/js/jquery-1.12.4.min.js"></script>
    <!-- 引入樣式 -->
    <link
    <%--          href="${APP_PATH}/static/bootstrap-3.3.7-dist/css/bootstrap.min.css"--%>
            href="${APP_PATH}/static/bootstrap-3.3.7-dist/css/bootstrap.min.css"
            rel="stylesheet" />
    <script
    <%--          src="${APP_PATH}/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>--%>
            src="${APP_PATH}/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</head>
</head>
<body>

<!-- 員工修改的模態框  https://v3.bootcss.com/javascript/#modals-usage -->
<div class="modal fade" id="empUpdateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">員工修改</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">
                    <div class="form-group">
                        <label for="empName_add_input" class="col-sm-2 control-label">員工姓名</label>
                        <div class="col-sm-10">
                            <p class="form-control-static" id="empName_update_static"></p>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">員工性別</label>
                        <label class="radio-inline">
                            <div class="col-sm-6">
                                <input type="radio" name="gender" id="gender1_update_input" value="M" checked="checked"> 男
                            </div>
                        </label>
                        <label class="radio-inline">
                            <div class="col-sm-10">
                                <input type="radio" name="gender" id="gender0_update_input" value="F"> 女
                            </div>
                        </label>
                    </div>
                    <div class="form-group">
                        <label for="email_update_input" class="col-sm-2 control-label" >Email</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" name="email" id="email_update_input" placeholder="sunnyboy@gmail.com">
                            <span class="help-block"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label" >部門名稱</label>
                        <div class="col-sm-5">
                            <select class="form-control" name="dId">

                            </select>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" id="emp_update_btn">修改</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">關閉或按ESC</button>
            </div>
        </div>
    </div>
</div>

<!-- 員工添加的模態框  https://v3.bootcss.com/javascript/#modals-usage -->
<div class="modal fade" id="empAddModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myAddModalLabel">員工添加</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">
                    <div class="form-group">
                        <label for="empName_add_input" class="col-sm-2 control-label">員工姓名</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" name="empName" id="empName_add_input" placeholder="員工姓名">
                            <span class="help-block"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">員工性別</label>
                        <label class="radio-inline">
                            <div class="col-sm-6">
                                <input type="radio" name="gender" id="gender1_add_input" value="M" checked="checked"> 男
                            </div>
                        </label>
                        <label class="radio-inline">
                            <div class="col-sm-10">
                                <input type="radio" name="gender" id="gender0_add_input" value="F"> 女
                            </div>
                        </label>
                    </div>
                    <div class="form-group">
                        <label for="email_add_input" class="col-sm-2 control-label" >Email</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" name="email" id="email_add_input" placeholder="sunnyboy@gmail.com">
                            <span class="help-block"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label" >部門名稱</label>
                        <div class="col-sm-5">
                            <select class="form-control" name="dId">

                            </select>
                        </div>
                    </div>


                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" id="emp_save_btn">保存</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">關閉或按ESC</button>

            </div>
        </div>
    </div>
</div>


<div class="container">
    <!--標題-->
    <div class="row">
        <div class="col-md-12">
            <h2>SSM4Eclipse</h2>
        </div>
    </div>
    <%--    按鈕--%>
    <div class="row">
        <div class="col-md-2 col-md-offset-9">
            <button class="btn btn-primary" id="emp_add_modal_btn">新增</button>
            <button class="btn btn-danger" id="emp_add_delete_all_btn">删除</button>
        </div>
    </div>
    <br/>
    <%--    顯示表格數據--%>
    <div class="row">
        <div class="col-md-12">
            <table class="table table-hover table-striped  table-bordered" id="emps_table">
                <thead>
                <tr>
                    <th>
                        <input type="checkbox" id="check_all"/>
                    </th>
                    <th>#</th>
                    <th>員工姓名</th>
                    <th>員工性別</th>
                    <th>郵件地址</th>
                    <th>部門名稱</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>

                </tbody>
            </table>
        </div>
    </div>
    <%--    顯示分頁訊息--%>
    <div class="row">
        <%--分頁文字訊息 --%>
        <div class="col-md-6" id="page_info_area">
            <%--分頁訊息 --%>
            <p>当前页，总页，總條记录</p>
        </div>
        <!--分頁條-->
        <div class="col-md-6" id="page_nav_area">
        </div>
    </div>

<script type="text/javascript">
        var totalRecord,currentPage;
        $(function(){
            to_page(1);
        });

        //跳轉到哪個頁碼
        function to_page(pn){
            $.ajax({
                url:"${APP_PATH}/emps",
                data:"pn="+pn,
                type:"get",
                success:function(result){
                    // 1.解析並顯示員工信息
                    build_emps_table(result);
                    // 2.解析並顯示分页信息
                    build_page_info(result);
                    //3.解析並顯示分頁條
                    build_page_nav(result);
                }
            });
        }

        function build_emps_table(result){
            $("#emps_table tbody").empty();
            var emps = result.extend.pageInfo.list;

            $.each(emps,function(index,item){

                //後來加的checkbox
                var checkBoxTd=$("<td><input type='checkbox' class='check_item'/></td>");
                var empIdTd=$("<td></td>").append(item.empId);
                var empNameTd=$("<td></td>").append(item.empName);
                var gender=item.gender=='M'?'男':'女';
                var genderTd=$("<td></td>").append(item.gender);
                var emailTd=$("<td></td>").append(item.email);
                var deptNameTd=$("<td></td>").append(item.department.deptName);
                var editBtn=$("<button></button>").addClass("btn btn-primary btn-md edit_btn")
                    .append($("<span></span>").addClass("glyphicon glyphicon-pencil").append("編輯"));
                editBtn.attr("edit-id",item.empId);
                var delBtn=$("<button></button>").addClass("btn btn-danger btn-md delete_btn")
                    .append($("<span></span>").addClass("glyphicon glyphicon-trash").append("刪除"));
                delBtn.attr("del-id",item.empId);
                var btnTd = $("<td></td>").append(editBtn).append("  ").append(delBtn);
                $("<tr></tr>").append(checkBoxTd)
                    .append(empIdTd).append(empNameTd).append(genderTd).append(emailTd).append(deptNameTd)
                    .append(btnTd).appendTo("#emps_table tbody");
            });
        }
        //解析並顯示分页信息
        function build_page_info(result){
            $("#page_info_area").empty();

            $("#page_info_area").append("当前"+result.extend.pageInfo.pageNum+"页，总"+result.extend.pageInfo.pages+"页，总"+result.extend.pageInfo.total
                +"条记录");
            totalRecord = result.extend.pageInfo.pages;
            currentPage = result.extend.pageInfo.pageNum
        }
        //解析並顯示分頁條
        function build_page_nav(result) {
            $("#page_nav_area").empty();
            var ul = $("<ul></ul>").addClass("pagination")
            //構建元素
            var firstPageLi = $("<li></li>")
                .append(
                    $("<a></a>").append("首頁").attr(
                        "href", "#"));
            var prePageLi = $("<li></li>").append(
                $("<a></a>").append("&laquo;"));
            if (result.extend.pageInfo.hasPreviousPage == false) {
                firstPageLi.addClass("disabled");
                prePageLi.addClass("disabled");
            } else {
                //取近來if else 可以讓disable 的  按下去不會再有請求發生
                //為元素添加點擊翻頁的事件
                firstPageLi.click(function () {
                    to_page(1);
                });
                prePageLi.click(function () {
                    to_page(result.extend.pageInfo.pageNum - 1);
                })
            }
            //注意一下 lastPageLi nextPageLi 位置擺錯會無法判斷

            var lastPageLi = $("<li></li>")
                .append(
                    $("<a></a>").append("末頁").attr(
                        "href", "#"));
            var nextPageLi = $("<li></li>").append(
                $("<a></a>").append("&raquo;"));

            if (result.extend.pageInfo.hasNextPage == false) {
                nextPageLi.addClass("disabled");
                lastPageLi.addClass("disabled");
            } else {
                //取近來if else 可以讓disable 的  按下去不會再有請求發生
                //為元素添加點擊翻頁的事件
                nextPageLi.click(function () {
                    to_page(result.extend.pageInfo.pageNum + 1);
                });
                lastPageLi.click(function () {
                    to_page(result.extend.pageInfo.pages);
                });
            }
            //添加首頁跟前一頁的提示
            ul.append(firstPageLi).append(prePageLi);

            //取出頁碼號1,2,3,4,5 依序傳給ul中添加頁碼提示
            $.each(result.extend.pageInfo.navigatepageNums, function (index, item) {
                var numLi = $("<li></li>").append($("<a></a>").append(item));
                if (result.extend.pageInfo.pageNum == item) {
                    numLi.addClass("active");
                }
                numLi.click(function () {
                    to_page(item);
                });
                ul.append(numLi);
            });
            //添加末頁跟下一頁的提示
            ul.append(nextPageLi).append(lastPageLi);

            var navEle = $("<nav></nav>").append(ul);
            navEle.appendTo("#page_nav_area"); // 如果是第一页，则不能点击首页和上一页
        }

        //清除表單完全數據(表單數據以及樣式都要重置)
        function reset_form(ele){
            //清除表單數據
            $(ele)[0].reset();
            //清除表單樣式
            $(ele).find("*").removeClass("has-error has-success");
            $(ele).find(".help-block").text("")
        }

        $("#emp_add_modal_btn").click(function(){
            //清除表單完全數據(表單數據以及樣式都要重置)
            reset_form("#empAddModal form");
            // //清除表單數據(表單重置)
            // $("#empAddModal form")[0].reset();
            getDepts("#empAddModal select");
            $("#empAddModal").modal({
                //背景不隱藏???
                backdrop: "static"
            });
        });

        //查出所有部門訊息並顯示
        function getDepts(ele){
            $(ele).empty();
            $.ajax({
                url:"${APP_PATH}/getDepts",
                type:"GET",
                // success:function (result){
                //囉嗦寫法 console.log(result);
                // }
                success(result){
                    //顯示部門訊息在下拉列表中
//                     console.log(result);
                    $("#empAddModal select").append();
                    $.each(result.extend.depts,function (){
                        var optionEle = $("<option></option>").append(this.deptName).attr("value",this.deptId);
                        optionEle.appendTo(ele);
                    });
                }
           
            });
        }

        function show_validate_msg(ele,okornot,msg){
            //清除當前元素狀態
            $(ele).parent().removeClass("has-success has-error");
            $(ele).next("span").text("");

            if("success"==okornot){
                $(ele).parent().addClass("has-success");
                $(ele).next("span").text(msg);
            }else if("error"==okornot){
                $(ele).parent().addClass("has-error");
                $(ele).next("span").text(msg);
            }
        }



        //校驗表單數據
        function validate_add_form(){
            //1.拿到要校驗的數據
            var empName = $("#empName_add_input").val();
            // u4e00-\u9fa5]{0,6}
            // var regName = /(^[a-zA-Z0-9_-]{6,16}$)|(^[\u2E80-\u9FFF]{2,5})/;
            var regName = /(^[a-zA-Z0-9_-]{6,16}$)|(^[\u4e00-\u9fa5]{2,5}$)/;
            if (!regName.test(empName)) {
                //bootstrap校驗錯誤會出現在框下面顯示錯誤訊息 在L-39 <span class="help-block"></span>
                //應該清空這個元素之前的樣式
                show_validate_msg("#empName_add_input","error","用户名是2-5位中文 或字符串6-16位英數字組合(前)");
                // alert("用户名是2-5位中文 或字符串6-16位英數字組合");
                return false;
            }
            else {
                show_validate_msg("#empName_add_input","success","");
            }
            var email = $("#email_add_input").val();
            var regEmail = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/
            if (!regEmail.test(email)) {
                //alert("邮箱格式不正确")
                show_validate_msg("#email_add_input","error","邮箱格式不正确")
                return false;
            }else {
                show_validate_msg("#email_add_input","success","");
            }
            return true
        }

        $("#empName_add_input").change(function (){
            // var empName = $("#empName_add_input").val();
            var empName=this.value;
            $.ajax({
                url:"${APP_PATH}/checkUser",
                type:"POST",
                data:"empName="+empName,
                success:function(result){
                    if(result.code==100){
                        show_validate_msg("#empName_add_input","success","用戶名可用");
                        $("#emp_save_btn").attr("ajax-valid","success");
                    }else{
                        show_validate_msg("#empName_add_input","error","用戶名不可用");
                        $("#emp_save_btn").attr("ajax-valid","error");
                    }
                }
            });
        });

        $("#emp_save_btn").click(function(){
            if(!validate_add_form()){
                return false;
            }
            //判斷之前的ajax用戶名校驗是否成功，若成功
            if($(this).attr("ajax-valid")=='error'){
                return false;
            }
            //發送ajax請求保存員工
            $.ajax({
                url:"${APP_PATH}/emp",
                type:"POST",
                data:$("#empAddModal form").serialize(),
                success:function(result){
                    //1. 繼續做員工保存成功的動作 關閉模態框
                    if(result.code==100) {
                            $("#empAddModal").modal('hide');
                        //2. 來到最後一頁
                        to_page(totalRecord+1);
                    }else{
                        if(undefined !=result.extend.errorFields.empName){
                            //顯示員工姓名錯誤訊息
                            show_validate_msg("#empName_add_input","error",result.extend.errorFields.empName);
                        }else if(result.extend.errorFields.email){
                            //顯示Email錯誤訊息
                            show_validate_msg("#email_add_input","error",result.extend.errorFields.email);
                        }
                    }
                }
            });
        });

        //1.我們式按鈕創建之前就綁定了
        //=>a.可以在創建按鈕的時候 一起綁定 b.綁定點擊.live (but 新版的jquery刪除了  改成.on進行替代
        $(document).on("click",".edit_btn",function(){
            //1.查出員工訊息
            getEmp($(this).attr("edit-id"));

            //2.查出部門訊息列表，並根據資料顯示
            getDepts("#empUpdateModal select");

            //3.把員工ID傳遞給模態框的更新按鈕
            $("#emp_update_btn").attr("edit-id",$(this).attr("edit-id"));
            $("#empUpdateModal").modal({
                backdrop: "static"
            });
        });
        function getEmp(id){
            $.ajax({
                url:"${APP_PATH}/emp/"+id,
                // data:"id="+id,
                type:"GET",
                success:function (result){
                    var empData = result.extend.emp;
                    $("#empName_update_static").text(empData.empName);
                    $("#email_update_input").val(empData.email);
                    $("#empUpdateModal input[type=radio]").val([empData.gender]);
                    // $("#empUpdateModal input[name=gender]").text(empData.empName);
                    $("#empUpdateModal select").val([empData.dId]);
                }
            });
        }
        $("#emp_update_btn").click(function (){
            var email = $("#email_update_input").val();
            var regEmail = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/
            if (!regEmail.test(email)) {
                show_validate_msg("#email_update_input","error","邮箱格式不正确")
                return false;
            }else {
                show_validate_msg("#email_update_input","success","");
            }

            $.ajax({
                url:"${APP_PATH}/emp/"+$(this).attr("edit-id"),
                type:"PUT",
                // data:$("#empUpdateModal form").serialize()+"&_method=PUT", 可以直接發PUT請求
                // 但要在web.xml配置  見controller
                data:$("#empUpdateModal form").serialize(),
                success:function (result){
                    console.log(result.msg);
                    if(result.code==100) {
                        $("#empUpdateModal").modal('hide');
                        //2. 來到修改的該頁
                        to_page(currentPage);
                    }else {
                        if (undefined != result.extend.errorFields.empName) {
                            //顯示員工姓名錯誤訊息
                            show_validate_msg("#empName_update_input", "error", result.extend.errorFields.empName);
                        } else if (result.extend.errorFields.email) {
                            //顯示Email錯誤訊息
                            show_validate_msg("#email_update_input", "error", result.extend.errorFields.email);
                        }
                    }
                }
            });
        });

        //單個刪除
        $(document).on("click",".delete_btn",function(){
            var wantdelName=$(this).parents("tr").find("td:eq(2)").text();
            if(!confirm("確定要刪除【"+wantdelName+"】這筆資料嗎?")){
                return false
            }
            $.ajax({
                url:"${APP_PATH}/emp/"+$(this).attr("del-id"),
                type:"DELETE",
                success:function (result){
                	to_page(currentPage);
                }
                //做到單個刪除 剩下做
            });
            // $(".delete_btn").attr("del-id",$(this).attr("del-id"));
            // $("#empUpdateModal").modal({
            //     backdrop: "static"
            // });
        });
        //=======批量刪除的功能
        //完成全選|全不選按鈕功能
        $("#check_all").click(function (){
            //attr 獲取是undefined
            //我們這些dom 原生屬性,attr獲取自定義屬性的值
            //prop修改和讀取dom原生屬性的值
            // alert($(this).attr("checked"));
            // alert($(this).prop("checked"));
            $(".check_item").prop("checked",$(this).prop("checked"))
        });

        //check_item
        $(document).on("click",".check_item",function (){
            //判斷當前選擇中的元素是否有五個
            // alert($(".check_item:checked").length);
            var flag = $(".check_item:checked").length==$(".check_item").length;
            $("#check_all").prop("checked",flag);
        });

        $("#emp_add_delete_all_btn").click(function(){
            var empNames="";
            var del_idstr="";
            $.each($(".check_item:checked"),function (){
                // alert($(this).parents("tr").find("td:eq(2)").text());
                // alert($(this).parents("tr").find("td:eq(2)").text());
                empNames+=$(this).parents("tr").find("td:eq(2)").text()+",";
                del_idstr+=$(this).parents("tr").find("td:eq(1)").text()+"-";
            });
            //去除多餘的,
            empNames=empNames.substring(0,empNames.length-1);
            //去除多餘的-
            del_idstr=del_idstr.substring(0,del_idstr.length-1);
            if(confirm("確認刪除【"+empNames+"】嗎")){
                $.ajax({
                    url:"${APP_PATH}/emp/"+del_idstr,
                    type:"DELETE",
                    success:function(result){
                        alert(result.msg);
                        to_page(currentPage);
                    }
                });
            }
        });
    </script>
</body>
</html>
